<template>
	<div>
		<top id="title"
			@selectByRequire="selectByRequire"
		></top>
		<list 
			@selectByRequire="selectByRequire"
			:videoCourses="videoCourses"
			:videoTotal="videoTotal"
			:cName="cName"
			:type="type"
			:page="page"
			:limit="limit"
		></list>
		<back-top></back-top>
	</div>
</template>

<script>
	import Top from './components/Top.vue'
	import List from './components/List.vue'
	import BackTop from '../Index/components/BackTop/BackTop.vue'
	import axios from 'axios';
	export default {
		name: 'Video',
		components: {
			Top,
			List,
			BackTop
		},
		data() {
			return {
				videoCourses: [],
				videoTotal: 0,
				cName: "",
				type: 2,
				page: 1,
				limit: 12,
			};
		},
		methods:{
			// 根据条件查询数据
			selectByRequire(cName, type, page, limit) {
				axios.get(this.$global_msg.videoRoute + '/video/selectByRequire', {
						params: {
							"cName": cName,
							"type": type,
							"page": page,
							"limit": limit
						}
					})
					.then((res) => {
						this.videoCourses = res.data.data
						this.videoTotal = res.data.count
						this.cName = cName
						this.type = type
						this.page = page
						this.limit = limit
					}).catch((response) => {
						console.log(response);
					})
			},
		},
		mounted() {
			// 根据session中存储的课程名进行查询
			var name = sessionStorage.getItem("cName")
			this.selectByRequire(name, 2, 1, 12);
			// 进去之后将session中存储的cName变为空串
			sessionStorage.setItem("cName", "")
		}
	};
</script>

<style>
	div {
		color: black;
	}
</style>
